<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8" />
  <title>电商</title>
  <th:block th:include="head::header"/>


<!--  &lt;!&ndash; Bootstrap Core CSS &ndash;&gt;
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"  type="text/css">
  &lt;!&ndash; Custom CSS &ndash;&gt;
  <link rel="stylesheet" th:href="@{css/style.css}">
  &lt;!&ndash; Custom Fonts &ndash;&gt;
  <link rel="stylesheet" th:href="@{font-awesome/css/font-awesome.min.css}"  type="text/css">
  <link rel="stylesheet" th:href="@{fonts/font-slider.css}" type="text/css">
  &lt;!&ndash; jQuery and Modernizr&ndash;&gt;
  <script src="js/jquery-2.1.1.js"></script>
  &lt;!&ndash; Core JavaScript Files &ndash;&gt;
  <script src="js/bootstrap.min.js"></script>-->

</head>

<body>
<!--Top-->
<nav id="top">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        <select class="language">
          <option value="English" selected>English</option>
          <option value="France">France</option>
          <option value="Germany">Germany</option>
        </select>
        <select class="currency">
          <option value="USD" selected>USD</option>
          <option value="EUR">EUR</option>
          <option value="DDD">DDD</option>
        </select>
      </div>
      <div class="col-xs-6">
        <ul class="top-link">
          <li><a href="account.html"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
          <li><a href="contact.html"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<!--Header-->
<header class="container">
  <div class="row">
    <div class="col-md-4">
      <div id="logo"><img src="images/logo.png" /></div>
    </div>
    <div class="col-md-4">
      <form class="form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn"><span class="glyphicon glyphicon-search"></span></button>
      </form>
    </div>
    <div class="col-md-4">
      <div id="cart"><a class="btn btn-1" href="cart.html"><span class="glyphicon glyphicon-shopping-cart"></span>CART : 0 ITEM</a></div>
    </div>
  </div>
</header>
<!--Navigation-->
<nav id="menu" class="navbar">
  <div class="container">
    <div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li><a href="qianTaiIndex.html">Home</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">PC Computers</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <ul class="list-unstyled">
                <li><a href="category.html">Window</a></li>
                <li><a href="category.html">MacBook</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Laptops &amp; Notebooks</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <ul class="list-unstyled">
                <li><a href="category.html">Dell</a></li>
                <li><a href="category.html">Asus</a></li>
                <li><a href="category.html">Samsung</a></li>
                <li><a href="category.html">Lenovo</a></li>
                <li><a href="category.html">Acer</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Mobiles &amp; Tablet</a>
          <div class="dropdown-menu" style="margin-left: -203.625px;">
            <div class="dropdown-inner">
              <ul class="list-unstyled">
                <li><a href="category.html">Iphone</a></li>
                <li><a href="category.html">Samsung</a></li>
                <li><a href="category.html">Nokia</a></li>
                <li><a href="category.html">Lenovo</a></li>
                <li><a href="category.html">Google</a></li>
              </ul>
              <ul class="list-unstyled">
                <li><a href="category.html">Nexus</a></li>
                <li><a href="category.html">Dell</a></li>
                <li><a href="category.html">Oppo</a></li>
                <li><a href="category.html">Blackberry</a></li>
                <li><a href="category.html">HTC</a></li>
              </ul>
              <ul class="list-unstyled">
                <li><a href="category.html">LG</a></li>
                <li><a href="category.html">Q-Mobiles</a></li>
                <li><a href="category.html">Sony</a></li>
                <li><a href="category.html">Wiko</a></li>
                <li><a href="category.html">T&T</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li><a href="category.html">Software</a></li>
      </ul>
    </div>
  </div>
</nav>
<!--//////////////////////////////////////////////////-->
<!--///////////////////HomePage///////////////////////-->
<!--//////////////////////////////////////////////////-->
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>
<div id="page-content" class="home-page">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <!-- Carousel -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators hidden-xs">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="images/main-banner1-1903x600.jpg" alt="First slide">
              <!-- Static Header -->
              <div class="header-text hidden-xs">
                <div class="col-md-12 text-center">
                </div>
              </div><!-- /header-text -->
            </div>
            <div class="item">
              <img src="images/main-banner2-1903x600.jpg" alt="Second slide">
              <!-- Static Header -->
              <div class="header-text hidden-xs">
                <div class="col-md-12 text-center">
                </div>
              </div><!-- /header-text -->
            </div>
            <div class="item">
              <img src="images/main-banner3-1903x600.jpg" alt="Third slide">
              <!-- Static Header -->
              <div class="header-text hidden-xs">
                <div class="col-md-12 text-center">
                </div>
              </div><!-- /header-text -->
            </div>
          </div>
          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div><!-- /carousel -->
      </div>
    </div>
    <div class="row">
      <div class="banner">
        <div class="col-sm-4">
          <img src="images/sub-banner1.png" />
        </div>
        <div class="col-sm-4">
          <img src="images/sub-banner2.png" />
        </div>
        <div class="col-sm-4">
          <img src="images/sub-banner3.png" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="heading"><h2>SPECIAL PRODUCTS</h2></div>
        <div class="products">
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="product">
              <div class="image"><a href="product.html"><img src="images/iphone.png" /></a></div>
              <div class="buttons">
                <a class="btn cart" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn wishlist" href="#"><span class="glyphicon glyphicon-heart"></span></a>
                <a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
              </div>
              <div class="caption">
                <div class="name"><h3><a href="product.html">Aliquam erat volutpat</a></h3></div>
                <div class="price">$122<span>$98</span></div>
                <div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span></div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="product">
              <div class="image"><a href="product.html"><img src="images/galaxy-s4.jpg" /></a></div>
              <div class="buttons">
                <a class="btn cart" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn wishlist" href="#"><span class="glyphicon glyphicon-heart"></span></a>
                <a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
              </div>
              <div class="caption">
                <div class="name"><h3><a href="product.html">Aliquam erat volutpat</a></h3></div>
                <div class="price">$122<span>$98</span></div>
                <div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="product">
              <div class="image"><a href="product.html"><img src="images/galaxy-note.jpg" /></a></div>
              <div class="buttons">
                <a class="btn cart" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn wishlist" href="#"><span class="glyphicon glyphicon-heart"></span></a>
                <a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
              </div>
              <div class="caption">
                <div class="name"><h3><a href="product.html">Aliquam erat volutpat</a></h3></div>
                <div class="price">$122<span>$98</span></div>
                <div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="product">
              <div class="image"><a href="product.html"><img src="images/Z1.png" /></a></div>
              <div class="buttons">
                <a class="btn cart" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn wishlist" href="#"><span class="glyphicon glyphicon-heart"></span></a>
                <a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
              </div>
              <div class="caption">
                <div class="name"><h3><a href="product.html">Aliquam erat volutpat</a></h3></div>
                <div class="price">$122<span>$98</span></div>
                <div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="banner">
        <div class="col-sm-6">
          <img src="images/sub-banner4.jpg" />
        </div>
        <div class="col-sm-6">
          <img src="images/sub-banner5.png" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="heading"><h2>FEATURED PRODUCTS</h2></div>
        <div class="products">
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="product">
              <div class="image"><a href="product.html"><img src="images/iphone.png" /></a></div>
              <div class="buttons">
                <a class="btn cart" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn wishlist" href="#"><span class="glyphicon glyphicon-heart"></span></a>
                <a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
              </div>
              <div class="caption">
                <div class="name"><h3><a href="product.html">Aliquam erat volutpat</a></h3></div>
                <div class="price">$122<span>$98</span></div>
                <div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span></div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="product">
              <div class="image"><a href="product.html"><img src="images/galaxy-s4.jpg" /></a></div>
              <div class="buttons">
                <a class="btn cart" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn wishlist" href="#"><span class="glyphicon glyphicon-heart"></span></a>
                <a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
              </div>
              <div class="caption">
                <div class="name"><h3><a href="product.html">Aliquam erat volutpat</a></h3></div>
                <div class="price">$122<span>$98</span></div>
                <div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="product">
              <div class="image"><a href="product.html"><img src="images/galaxy-note.jpg" /></a></div>
              <div class="buttons">
                <a class="btn cart" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn wishlist" href="#"><span class="glyphicon glyphicon-heart"></span></a>
                <a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
              </div>
              <div class="caption">
                <div class="name"><h3><a href="product.html">Aliquam erat volutpat</a></h3></div>
                <div class="price">$122<span>$98</span></div>
                <div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="product">
              <div class="image"><a href="product.html"><img src="images/Z1.png" /></a></div>
              <div class="buttons">
                <a class="btn cart" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
                <a class="btn wishlist" href="#"><span class="glyphicon glyphicon-heart"></span></a>
                <a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
              </div>
              <div class="caption">
                <div class="name"><h3><a href="product.html">Aliquam erat volutpat</a></h3></div>
                <div class="price">$122<span>$98</span></div>
                <div class="rating"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<footer>
  <div class="container">
    <div class="wrap-footer">
      <div class="row">
        <div class="col-md-3 col-footer footer-1">
          <img src="images/logofooter.png" />
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="col-md-3 col-footer footer-2">
          <div class="heading"><h4>Customer Service</h4></div>
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Delivery Information</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms & Conditions</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-footer footer-3">
          <div class="heading"><h4>My Account</h4></div>
          <ul>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Brands</a></li>
            <li><a href="#">Gift Vouchers</a></li>
            <li><a href="#">Specials</a></li>
            <li><a href="#">Site Map</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-footer footer-4">
          <div class="heading"><h4>Contact Us</h4></div>
          <ul>
            <li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
            <li><span class="glyphicon glyphicon-earphone"></span>+91 8866888111</li>
            <li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="copyright">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </div>
        <div class="col-md-6">
          <div class="pull-right">
            <ul>
              <li><img src="images/visa-curved-32px.png" /></li>
              <li><img src="images/paypal-curved-32px.png" /></li>
              <li><img src="images/discover-curved-32px.png" /></li>
              <li><img src="images/maestro-curved-32px.png" /></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
</body>
</html>
